<template>
    <div class="table-body-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="quartz-joblog-search mb15">
                <el-input size="default" v-model="state.tableData.param.name" placeholder="请输入定时任务调度日志表名称" class="search-input"> </el-input>
                <el-button size="default" @click="getTableData" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
            </div>
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                <el-table-column prop="name" label="任务名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobGroup" label="任务组名" show-overflow-tooltip>
                    <template #default="scope">
                        <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
                    </template>
                </el-table-column>
                <el-table-column prop="invokeTarget" label="调用目标字符串" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobMessage" label="日志信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="执行状态" show-overflow-tooltip>
                    <template #default="scope">
                        <dict-tag :options="sys_job_status" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="执行时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button link size="small" text type="primary" @click="onOpenView(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="state.tableData.total>0"
                    :total="state.tableData.total"
                    v-model:page="state.tableData.param.current"
                    v-model:limit="state.tableData.param.size"
                    @pagination="getTableData"
            />
        </el-card>
        <ViewDialog ref="viewDialogRef" :group-dict="sys_job_group" />
    </div>
</template>

<script setup lang="ts" name="quartzJoblog">
    import { joblogApi } from '/@/api/monitor/quartz/jobLog';
    import constConfig from '/@/utils/constConfig';

    const ViewDialog = defineAsyncComponent(() => import('/@/views/monitor/quartz/jobLog/view.vue'));
    const { proxy } = <any>getCurrentInstance();
    const { sys_job_status, sys_job_group } = proxy.useDict('sys_job_status', 'sys_job_group');
    const viewDialogRef = ref()

    // 定义变量内容
    const state = reactive({
        tableData: {
            data: [],
            total: 0,
            loading: false,
            param: {
                name:'',
                ...constConfig.pageModel,
            },
        },
        formData: {
            label: '',
            value: '',
            status: '0',
            type:'',
            typeCn: '', // 字典描述
            sort: 50
        },
        ...constConfig.dialogType
    });

    // 初始化表格数据
    const getTableData = () => {
        state.tableData.loading = true;
        joblogApi().page(state.tableData.param).then(res=>{
            state.tableData.data = res.data.records??[];
            state.tableData.total = res.data.total;
            state.tableData.loading = false;
        })
    };
    const onOpenView = (row: JobType) => {
        row = JSON.parse(JSON.stringify(row));
        viewDialogRef.value.openDialog(row);
    };
    // 页面加载时
    onMounted(() => {
        if (proxy.$route.query.name) {
            state.tableData.param.name = proxy.$route.query.name; 
        }
        getTableData();
    });
</script>
<style scoped lang="scss">
    .table-body-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
    .el-table {
        flex: 1;
    }
    }
    }
</style>